<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="答题名称" prop="examName">
        <el-input
          v-model="queryParams.examName"
          placeholder="请输入答题名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="路线坐标" prop="state">
        <el-select v-model="queryParams.siteId" filterable placeholder="路线坐标" clearable>
          <el-option
            v-for="dict in siteList"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select v-model="queryParams.state" placeholder="请选择状态" clearable>
          <el-option
            v-for="dict in dict.type.sys_notice_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="success"  icon="el-icon-plus" size="mini" @click="handleAdd">创建</el-button>
      </el-form-item>
    </el-form>

<!--    <el-row :gutter="10" class="mb8">-->
<!--      <el-col :span="1.5">-->
<!--        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">创建</el-button>-->
<!--      </el-col>-->
<!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
<!--    </el-row>-->

    <el-table v-loading="loading" :data="examList" border>
      <div slot="empty">
        <el-empty description="暂无题目信息"/>
      </div>
      <el-table-column label="主键" align="center" prop="examId" v-if="false"/>
      <el-table-column label="路线坐标点" align="center" prop="siteName" width="250" show-overflow-tooltip/>
      <el-table-column label="答题名称" align="center" prop="examName" width="250" show-overflow-tooltip/>
      <el-table-column label="难易程度" align="center" prop="examName" width="250" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-rate :value="Number(scope.row.difficulty)" show-text :colors="colors" disabled style="text-align: left"
                   :texts="['非常容易','容易','一般','困难','非常困难']"></el-rate>
        </template>
      </el-table-column>
      <el-table-column label="题目数量" align="center" prop="examName" width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.topicList.length }}
        </template>
      </el-table-column>
      <el-table-column label="参与人数" align="center" width="100" prop="peopleSum" show-overflow-tooltip/>
      <el-table-column label="状态" width="120" align="center" prop="state">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_notice_status" :value="scope.row.state"/>
        </template>
      </el-table-column>
      <el-table-column label="题目详情" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="link-hover" style="font-size: 12px;color: #1890FF"
                @click="handleDetail(scope.row)">点击查看题目详情</span>
        </template>
      </el-table-column>
      <el-table-column label="用户答题详情" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="link-hover" style="font-size: 12px;color: #1890FF"
                @click="handleJoinDetail(scope.row)">点击查看用户答题详情</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="300">
        <template slot-scope="scope">
          <el-button  size="small" type="warning" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
          </el-button>
          <!--          <el-button size="mini" type="text" icon="el-icon-delete">删除-->
          <!--          </el-button>-->
          <el-button v-if="scope.row.state == '2'" size="small" type="success"  icon="el-icon-success"
                     @click="changeState(scope.row,1)">上架
          </el-button>
          <el-button v-if="scope.row.state == '1'" size="small" type="info" plain icon="el-icon-error"
                     @click="changeState(scope.row,2)">下架
          </el-button>
          <el-button size="small" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>


    <!-- 创建答题窗口   -->
    <el-dialog :title="title" :visible.sync="open" width="1400px" append-to-body>
      <div>
        <!--  标题      -->
        <el-row>
          <el-col :span="2">
            <div style="text-align: right">
              <span style="line-height: 30px;text-align: right">答题名称：</span>
            </div>
          </el-col>
          <el-col :span="4">
            <el-input v-model="examForm.examName" placeholder="请输入此次答题的名称"/>
          </el-col>
          <el-col :span="2">
            <div style="text-align: right">
              <span style="line-height: 30px;text-align: right">路线标点：</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div v-if="!isUpdate">
              <el-select v-model="examForm.siteId" filterable placeholder="请选择路线坐标">
                <el-option
                  v-for="dict in siteList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </div>
            <div v-else style="line-height: 30px;">
              {{ examForm.siteName }}
            </div>
          </el-col>
          <el-col :span="2">
            <div style="text-align: right">
              <span style="line-height: 30px;text-align: right">题目难度：</span>
            </div>
          </el-col>
          <el-col :span="4">
            <el-rate v-model="examForm.difficulty" show-text :colors="colors"
                     :texts="['非常容易','容易','一般','困难','非常困难']"></el-rate>
          </el-col>


          <el-col :span="4">
            <div>
              <el-button type="success" size="small" icon="el-icon-circle-plus"
                         style="float: right;margin-right: 20px" @click="openChooseType = true">
                添加题目
              </el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="el-dialog-div" style="margin-top: 15px">
        <el-card shadow="never">
          <el-empty v-if="examForm.topicList.length == 0" description="请创建新的题目！"></el-empty>
          <div v-for="(topic,index) in examForm.topicList">

            <el-card shadow="hover" style="padding-bottom: 15px;margin-top: 10px">

              <!--     设置题目和答案         -->
              <el-row>
                <el-col :span="4">
                  <div style="text-align: right">
                    <span style="line-height: 30px;text-align: right">{{ topic.topicOrder }}、题目名称：</span>
                  </div>
                </el-col>

                <!--       题目         -->
                <el-col :span="8">
                  <el-input v-model="topic.topicName" placeholder="请输入题目名称"/>
                </el-col>
                <!--        类型        -->
                <el-col :span="2">
                  <div>
                    <el-button
                      type="primary" size="mini" v-if="topic.topicType == 1"
                      style="float: right;margin-right: 20px">
                      单选
                    </el-button>
                    <el-button
                      type="success" size="mini" v-if="topic.topicType == 2"
                      style="float: right;margin-right: 20px">
                      多选
                    </el-button>
                    <el-button
                      type="warning" size="mini" v-if="topic.topicType == 3"
                      style="float: right;margin-right: 20px">
                      判断
                    </el-button>
                  </div>
                </el-col>

                <!--      答案          -->
                <el-col :span="3">
                  <div style="text-align: right">
                    <span style="line-height: 30px;text-align: right">设置第{{ topic.topicOrder }}题的答案：</span>
                  </div>
                </el-col>

                <!--设置答案-->
                <el-col :span="6">

                  <!--       设置判断单选题答案           -->
                  <div style="text-align: right" v-if="topic.topicType == 1">
                    <el-select v-model="topic.topicAnswer" placeholder="请正确选择答案">
                      <el-option v-for="item in options1" :key="item.value" :label="item.label"
                                 :value="item.value"></el-option>
                    </el-select>
                  </div>

                  <!--         设置多选         -->
                  <div style="text-align: right" v-if="topic.topicType == 2">
                    <el-select v-model="topic.topicAnswer" multiple placeholder="请选择">
                      <el-option v-for="item in options1" :key="item.value" :label="item.label"
                                 :value="item.value"></el-option>
                    </el-select>
                  </div>

                  <!--       设置判断题目答案           -->
                  <div style="text-align: right" v-if="topic.topicType == 3">
                    <el-select v-model="topic.topicAnswer" placeholder="请正确选择答案">
                      <el-option v-for="item in options" :key="item.value" :label="item.label"
                                 :value="item.value"></el-option>
                    </el-select>
                  </div>
                </el-col>

                <el-col :span="1">
                  <el-popconfirm
                    confirm-button-text='是的呢'
                    cancel-button-text='不用了'
                    icon="el-icon-info"
                    icon-color="red"
                    @confirm="removeTopic(index,topic)"
                    title="是否删除此题目？"
                  >
                    <el-button slot="reference" type="danger" size="mini" style="float: right" plain
                               icon="el-icon-delete" circle/>

                  </el-popconfirm>

                </el-col>
              </el-row>

              <!--    题目设置 判断题          -->
              <div v-if="topic.topicType == 3">
                <el-row style="margin-top: 10px">
                  <el-col :span="4">
                    <div style="text-align: right">
                    <span style="line-height: 30px;text-align: right">
                      设置选项1：
                    </span>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <el-select v-model="topic.choose1" placeholder="请选择">
                      <el-option v-for="item in options" :key="item.value" :label="item.label"
                                 :value="item.value"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="4">
                    <div style="text-align: right">
                    <span style="line-height: 30px;text-align: right">
                      设置选项2：
                    </span>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <el-select v-model="topic.choose2" placeholder="请选择">
                      <el-option v-for="item in options" :key="item.value" :label="item.label"
                                 :value="item.value"></el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </div>

              <!--     题目设置   选择体       -->
              <div v-else>
                <el-row style="margin-top: 10px">
                  <el-col :span="12">
                    <el-col :span="8">
                      <div style="text-align: right">
                    <span style="line-height: 30px;text-align: right">
                      设置选项A：
                    </span>
                      </div>
                    </el-col>
                    <el-col :span="16">
                      <el-input v-model="topic.choose1" placeholder="设置设置选项"/>
                    </el-col>
                  </el-col>
                  <el-col :span="12">
                    <el-col :span="8">
                      <div style="text-align: right">
                    <span style="line-height: 30px;text-align: right">
                      设置选项B：
                    </span>
                      </div>
                    </el-col>
                    <el-col :span="16">
                      <el-input v-model="topic.choose2" placeholder="设置设置选项"/>
                    </el-col>
                  </el-col>
                  <el-col :span="12" v-if="topic.topicType != '3'" style="margin-top: 10px">
                    <el-col :span="8">
                      <div style="text-align: right">
                    <span style="line-height: 30px;text-align: right">
                      设置选项C：
                    </span>
                      </div>
                    </el-col>
                    <el-col :span="16">
                      <el-input v-model="topic.choose3" placeholder="设置设置选项"/>
                    </el-col>
                  </el-col>
                  <el-col :span="12" v-if="topic.topicType != '3'" style="margin-top: 10px">
                    <el-col :span="8">
                      <div style="text-align: right">
                    <span style="line-height: 30px;text-align: right">
                      设置选项D：
                    </span>
                      </div>
                    </el-col>
                    <el-col :span="16">
                      <el-input v-model="topic.choose4" placeholder="设置设置选项"/>
                    </el-col>
                  </el-col>
                </el-row>

              </div>

              <div>
                <el-row style="margin-top: 10px">
                  <el-col :span="24">
                    <el-col :span="4">
                      <div style="text-align: right">
                    <span style="line-height: 30px;text-align: right">
                      设置答案解析：
                    </span>
                      </div>
                    </el-col>
                    <el-col :span="20">
                      <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="topic.remark"
                                placeholder="请输入题目解析"/>
                    </el-col>
                  </el-col>
                </el-row>
              </div>

            </el-card>
          </div>
        </el-card>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="this.examForm.topicList.length > 0" @click="handleAddCommit">提 交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 选择答题窗口    -->
    <el-dialog title="请选择创建题目的类型" :visible.sync="openChooseType" width="30%" style="margin-top: 250px">
      <div style="text-align: center">
        <el-select v-model="topicType" placeholder="请正确选择答案">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openChooseType = false">取 消</el-button>
        <el-button type="primary" @click="addTopic">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 查看答题详情   -->
    <el-dialog :title="title" :visible.sync="showDetail" width="1400px" append-to-body>
      <div>
        <!--  标题      -->
        <el-row>
          <el-col :span="5">
            路线标点：{{ examForm.siteName }}
          </el-col>
          <el-col :span="5">
            答题名称：{{ examForm.examName }}
          </el-col>
          <el-col :span="5">
            创建时间：{{ examForm.createTime }}
          </el-col>
          <el-col :span="2" style="text-align: right">
            难易程度：
          </el-col>
          <el-col :span="4">
            <el-rate :value="Number(examForm.difficulty)" show-text :colors="colors" disabled
                     :texts="['非常容易','容易','一般','困难','非常困难']"></el-rate>
          </el-col>
          <el-col :span="3">
            状态：
            <dict-tag :options="dict.type.sys_notice_status" :value="examForm.state"/>
          </el-col>
        </el-row>
      </div>
      <div class="el-dialog-div" style="margin-top: 15px">
        <el-card shadow="never">
          <div v-for="(topic,index) in examForm.topicList">

            <el-card shadow="hover" style="padding-bottom: 15px;margin-top: 10px">

              <!--     设置题目和答案         -->
              <el-row>
                    <span style="line-height: 30px;">
                      {{ topic.topicOrder }}、题目名称： {{ topic.topicName }}
                    </span>
                <el-button
                  type="primary" size="mini" v-if="topic.topicType == 1"
                  style="margin-left: 20px">
                  单选
                </el-button>
                <el-button
                  type="success" size="mini" v-if="topic.topicType == 2"
                  style="margin-left: 20px">
                  多选
                </el-button>
                <el-button
                  type="warning" size="mini" v-if="topic.topicType == 3"
                  style="margin-left: 20px">
                  判断
                </el-button>
                <!--      答案          -->
                <span style="line-height: 30px;margin-left: 20px">
                  第{{ topic.topicOrder }}题的答案：
                  <span v-if="topic.topicAnswer == '1'">正确</span>
                  <span v-else-if="topic.topicAnswer == '2'">错误</span>
                  <span v-else>{{ topic.topicAnswer }}</span>
                </span>
              </el-row>

              <!--    题目判断题          -->
              <div v-if="topic.topicType == 3">
                <el-row style="margin-top: 10px">
                  <el-col :span="12">
                    <span v-if="topic.choose1 == 1" style="line-height: 30px;">选项1： 正确</span>
                    <span v-else style="line-height: 30px;">选项1： 错误</span>
                  </el-col>
                  <el-col :span="12">
                    <span v-if="topic.choose2 == 1" style="line-height: 30px;">选项2： 正确</span>
                    <span v-else style="line-height: 30px;">选项2： 错误</span>
                  </el-col>
                </el-row>
              </div>
              <!--     题目   选择体       -->
              <div v-else>
                <el-row style="margin-top: 10px">
                  <el-col :span="12">
                    <span style="line-height: 30px;">选项A：  {{ topic.choose1 }}</span>
                  </el-col>
                  <el-col :span="12">
                    <span style="line-height: 30px;">选项B：  {{ topic.choose2 }}</span>
                  </el-col>
                  <el-col :span="12" style="margin-top: 10px">
                    <span style="line-height: 30px;">选项C：    {{ topic.choose3 }}</span>
                  </el-col>
                  <el-col :span="12" style="margin-top: 10px">
                    <span style="line-height: 30px;">选项D： {{ topic.choose4 }}</span>
                  </el-col>
                </el-row>
              </div>


              <div>
                <el-row style="margin-top: 10px">
                  <el-col :span="24">
                    <span style="line-height: 30px;">题目解析：  {{ topic.remark }}</span>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </el-card>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDetail=false">关 闭</el-button>
      </div>
    </el-dialog>


    <el-dialog :title="title" :visible.sync="showJoinOpen" width="1400px" append-to-body>
      <div class="el-dialog-div">


        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                     label-width="68px">
              <el-form-item label="微信昵称" prop="examName">
                <el-input
                  v-model="examUserQuery.userNickname"
                  placeholder="请输入微信昵称"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="真实姓名" prop="examName">
                <el-input
                  v-model="examUserQuery.userName"
                  placeholder="请输入真实姓名"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="正确率" prop="state">
                <el-select v-model="examUserQuery.accuracyType" placeholder="请选择正确率" clearable>
                  <el-option
                    v-for="dict in accuracyTypeList"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getExamUserList(null)">搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQueryExamUser">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div v-if="examUserList.length == 0">
            <el-empty description="暂无用户数据"></el-empty>
          </div>
          <div v-else>
            <el-row :gutter="10">
              <el-col :sm="24" :lg="8" v-for="user in examUserList" style="margin-bottom: 10px">
                <el-card shadow="hover">
                  <el-row :gutter="10">
                    <el-col :sm="8" :lg="8">
                      <div class="block" style="text-align: center">
                        <el-avatar shape="square" :size="80" :src="user.userImg"></el-avatar>
                      </div>
                    </el-col>
                    <el-col :sm="16" :lg="16" style="font-size: 14px">
                      <el-tooltip class="item" effect="dark" content="微信昵称 | 真实姓名" placement="top">
                        <div>
                          <i class="el-icon-user-solid" style="color: #00afff"></i>: {{ user.userNickname }} |
                          {{ user.userName }}
                        </div>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="答题提交时间" placement="top">
                        <div style="margin-top: 5px">
                          <i class="el-icon-alarm-clock" style="color: #00afff"></i>: {{ user.joinTime }}
                        </div>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="用户提交的答案" placement="top">
                        <div style="margin-top: 5px">
                          <i class="el-icon-edit" style="color: #00afff"></i>: {{ user.userAnswer }}
                        </div>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="用户正确题数 | 用户准确率" placement="top">
                        <div style="margin-top: 5px">
                          <i class="el-icon-success" style="color: #00afff"></i>: {{ user.userTrueSum }} 题 |
                          {{ user.userAccuracy * 100 }} %
                        </div>
                      </el-tooltip>
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
      <div slot="footer" class="dialog-footer">
        <pagination v-show="examUserTotal>0" :total="examUserTotal" :page.sync="examUserQuery.pageNum"
                    :limit.sync="examUserQuery.pageSize" :page-sizes="[9,18,27,36]"
                    @pagination="getExamUserList(null)"/>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {addExam, delExam, getExam, listExam, updateExam} from "@/api/applet/exam";
import {listExamUser} from "@/api/applet/examUser";
import {getSiteSelectList} from "@/api/applet/appletSite";
import {delTopic} from "@/api/applet/topic";

export default {
  name: "index",
  dicts: ['sys_notice_status'],
  data() {
    return {

      accuracyTypeList: [
        {"label": "100%(全部答对)", "value": "5"},
        {"label": "80% ~ 99%", "value": "4"},
        {"label": "60% ~ 79%", "value": "3"},
        {"label": "1% ~ 59%", "value": "2"},
        {"label": "0%(一题未对)", "value": "1"},


      ],


      examUserQuery: {
        pageNum: 1,
        pageSize: 9,
        examId: null,
        userName: null,
        userNickname: null,
        accuracyType: null,
      },
      examUserTotal: 0,


      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      showJoinOpen: false,
      showDetail: false,
      isUpdate: false,
      loading: true,
      ids: [],
      single: true,
      multiple: true,
      showSearch: true,
      total: 0,
      examList: [],
      examUserList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        state: null,
        examName: null,
        siteId: null,
      },
      open: false,
      openChooseType: false,
      topicType: '1',
      title: "",
      typeOptions: [{value: '1', label: '单选题'}, {value: '2', label: '多选题'}, {value: '3', label: '判断题'}],
      options: [{value: '1', label: '正确'}, {value: '2', label: '错误'}],
      options1: [
        {value: 'A', label: 'A'}, {value: 'B', label: 'B'},
        {value: 'C', label: 'C'}, {value: 'D', label: 'D'}
      ],
      examForm: {
        examId: null,
        examName: null,
        startEndTime: [], //起止时间
        topicList: [],
        examStartTime: null,
        examEndTime: null,
        createTime: null,
        siteName: null,
        siteId: null,
        state: null,
        difficulty: null,
      },
      siteList: []
    }
  },
  created() {
    this.getList();
    this.getSiteList();
  },
  methods: {
    //获取路线坐标图
    getSiteList() {
      getSiteSelectList().then(res => {
        this.siteList = res.data;
      })
    },

    resetQueryExamUser() {
      this.examUserQuery.userName = null;
      this.examUserQuery.pageNum = 1;
      this.examUserQuery.pageSize = 9;
      this.examUserQuery.userNickname = null;
      this.examUserQuery.accuracyType = null;
      this.getExamUserList(null)
    },

    //获取参加的用户
    getExamUserList(row) {
      if (row != null || row != undefined) {
        this.examUserQuery.userName = null;
        this.examUserQuery.userNickname = null;
        this.examUserQuery.accuracyType = null;
        this.examUserQuery.examId = row.examId;
      }
      listExamUser(this.examUserQuery).then(response => {
        this.examUserList = response.rows;
        this.examUserTotal = response.total;
        // this.total = response.total;
        this.loading = false;
      });
    },

    //参加详情
    handleJoinDetail(row) {
      this.getExamUserList(row)
      this.showJoinOpen = true;
      let topic = row.topicList;
      let trueAn = '';
      for (let i = 0; i < topic.length; i++) {
        let temp = "";
        if (topic[i].topicType == 2) {
          temp = topic[i].trueAnser.split("-").join('')
        } else {
          temp = topic[i].trueAnser
        }
        if (i > 0) {
          trueAn += '-' + temp
        } else {
          trueAn += topic[i].trueAnser
        }

      }
      this.title = row.examName + " 的用户答题详情，难度系数: " + row.difficulty + " 颗星，正确答案：" + trueAn;
    },


    //查询试题详情
    selectExamById(examId) {
      getExam(examId).then(response => {
        this.reset();
        let res = response.data;
        this.examForm.examId = res.examId;
        this.examForm.examName = res.examName;
        this.examForm.siteId = res.siteId;
        this.examForm.siteName = res.siteName;
        this.examForm.createTime = res.createTime;
        this.examForm.state = res.state;
        this.examForm.difficulty = res.difficulty;
        let topic = res.topicList;
        this.examForm.topicList = topic;
        for (let i = 0; i < topic.length; i++) {
          let obj = topic[i]
          if (obj.topicType == 2) {
            this.examForm.topicList[i].topicAnswer = obj.trueAnser.split("-");
          } else {
            this.examForm.topicList[i].topicAnswer = obj.trueAnser;
          }
        }
      });
    },


    //改变状态 上下架
    changeState(row, state) {
      let tip = state == 1 ? "上架" : '下架';
      let param = {"examId": row.examId, "state": state};
      updateExam(param).then(response => {
        this.$modal.msgSuccess(tip + "成功!");
        this.getList();
      });
    },


    //** 查询exam列表 *
    getList() {
      this.loading = true;
      listExam(this.queryParams).then(response => {
        this.examList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },


    //** 搜索按钮操作 *
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.queryParams.state = null;
      this.queryParams.siteId = null;
      this.getList();
    },


    //表单重置
    reset() {
      this.examForm = {
        examId: null,
        examName: null,
        examStartTime: null,
        examEndTime: null,
        createBy: null,
        createTime: null,
        updateTime: null,
        updateBy: null,
        startEndTime: [], //起止时间
        topicList: [],
        siteId: null,
        siteName: null,
        difficulty: null
      };
    },


    handleAdd() {
      this.reset();
      this.open = true;
      this.isUpdate = false;
      this.title = "创建一场答题";
    },

    handleUpdate(row) {
      this.open = true;
      this.isUpdate = true;
      this.title = "修改路线坐标：" + row.siteName + " 的答题：" + row.examName;
      this.selectExamById(row.examId);
    },

    handleDetail(row) {
      this.title = "答题详情 —— 路线标点：" + row.siteName + " - 场次名称：" + row.examName;
      this.showDetail = true;
      this.selectExamById(row.examId);
    },


    //提交创建的答题
    handleAddCommit() {
      if (this.examForm.siteId == null) {
        this.$modal.msgError("请选择路线坐标!");
        return;
      }
      if (this.examForm.difficulty == null) {
        this.$modal.msgError("请设置题目难度!");
        return;
      }
      if (this.examForm.examName == null) {
        this.$modal.msgError("请设置答题活动名称!");
        return;
      }
      let len = this.examForm.topicList.length;
      if (len > 0) {
        let obj = this.examForm.topicList[len - 1];
        if (obj.topicName == null) {
          this.$modal.msgError("请设置最后的题目名称!");
          return;
        }
        if (obj.topicAnswer.length === 0) {
          this.$modal.msgError("请设置最后一题的题目答案!");
          return;
        }
        if (obj.choose1 == null || obj.choose2 == null) {
          this.$modal.msgError("最后一题有题目选项未设置完整");
          return;
        }
        if (obj.topicType != 3) {
          if (obj.choose3 == null || obj.choose4 == null) {
            this.$modal.msgError("最后一题有题目选项未设置完整");
            return;
          }
        }
        this.dealAnswer();
        this.siteList.forEach(item => {
          if (item.value == this.examForm.siteId)
            this.examForm.siteName = item.label;
        })


        if (this.isUpdate) {
          updateExam(this.examForm).then(res => {
            this.$modal.msgSuccess("修改成功！");
            this.getList();
            this.open = false;
          })
        } else {
          addExam(this.examForm).then(res => {
            this.$modal.msgSuccess("创建成功！");
            this.getList();
            this.open = false;
          })
        }
      }
    },

    //处理答案
    dealAnswer() {
      for (let i = 0; i < this.examForm.topicList.length; i++) {
        let answer = '';

        if (this.examForm.topicList[i].topicType == '2') {
          let ans = this.examForm.topicList[i].topicAnswer;
          for (let j = 0; j < ans.length - 1; j++) {
            answer += ans[j] + '-';
          }
          answer += ans[ans.length - 1];
        } else {
          answer = this.examForm.topicList[i].topicAnswer;
        }
        this.examForm.topicList[i].trueAnser = answer;
      }
    },


    //增加题目
    addTopic() {
      let len = this.examForm.topicList.length;
      if (len > 0) {
        let obj = this.examForm.topicList[len - 1];

        if (obj.topicName == null) {
          this.$modal.msgError("请设置上一题的题目名称!");
          this.openChooseType = false;
          return;
        }
        if (obj.topicAnswer.length === 0) {
          this.$modal.msgError("请设置上一题的题目答案!");
          this.openChooseType = false;
          return;
        }
        if (obj.choose1 == null || obj.choose2 == null) {
          this.$modal.msgError("上一题有题目选项未设置完整");
          this.openChooseType = false;
          return;
        }
        if (obj.topicType != 3) {
          if (obj.choose3 == null || obj.choose4 == null) {
            this.$modal.msgError("上一题有题目选项未设置完整");
            this.openChooseType = false;
            return;
          }
        }
      }
      let topic;
      topic = {
        "topicName": null, // 题目名称
        "topicAnswer": [], //题目答案
        "choose1": null, //选项1
        "choose2": null,//选项2
        "choose3": null,//选项3
        "choose4": null,//选项4
        "topicType": this.topicType,//题目类型
        "topicOrder": (this.examForm.topicList.length + 1) // 题目的编号
      }
      this.examForm.topicList.push(topic)
      this.openChooseType = false;
    },


    //删除一个题目
    removeTopic(index, topic) {
      if (this.examForm.topicList.length == 1) {
        this.examForm.topicList = []
      } else if (index == (this.examForm.topicList.length - 1)) {
        this.examForm.topicList.pop();
      } else {
        for (let i = index; i < this.examForm.topicList.length - 1; i++) {
          this.examForm.topicList[i] = this.examForm.topicList[(i + 1)];
          this.examForm.topicList[i].topicOrder = (i + 1);
        }
        this.examForm.topicList.pop();
      }
      if (this.isUpdate) {
        delTopic(topic.topicId);
      }


    },


    handleDelete(row) {
      const examIds = row.examId || this.ids;
      this.$modal.confirm('是否确认删除"' + row.examName + '"的数据？').then(function () {
        return delExam(examIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
  }

}
</script>

<style scoped>
.el-dialog-div {
  height: 60vh;
  overflow: auto;
  padding: 0 20px 0 0;
}


.link-hover:hover {
  cursor: pointer;
}


</style>
